<template>
  <div style="padding: 10px">
    <div class="headerBoxList">
      <svg
        width="24"
        height="24"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect x="4" y="14" width="36" height="20" rx="2" fill="none" stroke="#333" stroke-width="4" />
        <path
          d="M42 20H44C45.1046 20 46 20.8954 46 22V26C46 27.1046 45.1046 28 44 28H42V20Z"
          fill="#333"
        />
        <path
          d="M13 21V27M19 21V27M25 21V27M31 24V27"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
        />
      </svg>
      <span style="margin-left: 10px">手机屏幕明暗记录</span>
    </div>

    <!-- 查询条件 -->
    <el-form
      ref="queryFormRef"
      :model="queryForm"
      label-width="80px"
      size="small"
      class="mb12"
      style="margin-top: 10px;"
    >
      <el-row :gutter="14">
        <el-col :span="14">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="queryForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="timestamp"
              :default-time="['00:00:00', '23:59:59']"
              unlink-panels
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="display: flex; align-items: center;">
          <el-button type="primary" size="small" @click="onSearch">查询</el-button>
          <el-button size="small" @click="onReset" style="margin-left: 8px;">重置</el-button>
        </el-col>
      </el-row>
    </el-form>


    <el-collapse v-model="activity" accordion>
  <el-collapse-item title="时间线" name="1">
    <!-- 时间轴 -->
  <div class="timeline-wrapper" ref="timelineScroll">
    <div v-for="(item, index) in list" :key="index" class="timeline-item">
      <div class="timeline-dot" :style="{ background: getDotColor(index) }">
        <i class="el-icon-time"></i>
      </div>
      <div
        v-if="index < list.length - 1"
        class="timeline-line"
        :style="{ background: getLineColor(index) }"
      ></div>

      <div class="timeline-content-box">
        <div class="timeline-header">
          <span class="timeline-step">STEP {{ index + 1 }}</span>
          <span class="timeline-date">{{ formateDate(item.time) }}</span>
        </div>
        <div class="timeline-card">
          <div class="timeline-title">
            <i class="el-icon-document timeline-icon"></i>
            {{ item.title || "操作内容" }}
          </div>
          <div class="timeline-body">{{ item.content }}</div>
          <div class="timeline-footer" v-if="item.tag">
            <el-tag size="mini" type="success" effect="dark">{{ item.tag }}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
  </el-collapse-item>
  <el-collapse-item title="列表详情" name="2">
    <!-- 数据表格 -->
    <div class="contentBoxYY" >
      <el-table
        v-loading="loading"
        ref="tableScroll"
        :data="list"
        border
        height="50vh"
        size="small"
        empty-text="暂无数据"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="time" label="时间" min-width="80">
            <template slot-scope="scope">
                {{formateDate(scope.row.time)}}
            </template>
        </el-table-column>
        <el-table-column prop="content" label="状态" min-width="120" />
      </el-table>
    </div>

  </el-collapse-item>

</el-collapse>



   
    <!-- <div>时间线</div> -->
    

    <!-- 分页器 -->
    <div class="block pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="offset"
        :page-size="limit"
        layout="total,  prev, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { battery_history_api } from "@/api/phoneInfo/index";
import { parseTime } from '@/utils/index'
export default {
  name: "phoneBatteryHistory1",
  props: ["sendData"],
  data() {
    return {
      activity:"1",
      list: [],
      total: 0,
      offset: 1,
      limit: 40,
      loading: false,
      selectedIndex: -1, // 当前选中的时间轴索引
      queryForm: {
        timeRange: [], // [startTimestampMs, endTimestampMs]
      },
    };
  },
  created() {
    this.initFunction();
  },
  watch: {
    "$store.state.account.basePhone1": function () {
      this.initFunction();
    },
  },
  mounted(){
    this.initFunction();
  },
  methods: {
     getDotColor(i) {
      const colors = ['#00bcd4', '#67c23a', '#e6a23c', '#f56c6c', '#8e44ad']
      return colors[i % colors.length]
    },
    getLineColor(i) {
      const next = (i + 1) % 5
      return `linear-gradient(to bottom, ${this.getDotColor(i)}, ${this.getDotColor(next)})`
    },
    formateDate(date){
      return parseTime(date)
    },
    handleSizeChange(val) {
      this.limit = val;
      this.offset = 1;
      this.initFunction();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.initFunction();
    },
    onSearch() {
      this.offset = 1;
      this.initFunction();
    },
    onReset() {
      this.queryForm.timeRange = [];
      this.offset = 1;
      this.limit = 40;
      this.initFunction();
    },
    handleRowClick(row, column, event) {
      const index = this.list.indexOf(row);
      if (index !== -1) this.selectedIndex = index;
    },
    tableRowClassName({ row, rowIndex }) {
      return rowIndex === this.selectedIndex ? "active-row" : "";
    },
    selectTimeline(index) {
      this.selectedIndex = index;
      const item = this.list[index];
      this.$message.info(`选中时间：${item.time}`);
    },
    // 核心加载
    initFunction() {
      const proofNum = this.sendData?.proof_num || "";
      const payload = {
        proof_num: proofNum,
        offset: this.offset,
        limit: this.limit,
      };
      if (Array.isArray(this.queryForm.timeRange) && this.queryForm.timeRange.length === 2) {
        const [startMs, endMs] = this.queryForm.timeRange;
        payload.starttime = Math.floor(Number(startMs) / 1000);
        payload.endtime = Math.floor(Number(endMs) / 1000);
      }
      this.loading = true;
      battery_history_api(payload)
        .then((res) => {
          const data = res?.data || {};
          if (Array.isArray(data)) {
            this.list = data;
            this.total = data[0].cnt;
          } else if (Array.isArray(data.list)) {
            this.list = data.list;
            if (typeof data.total !== "undefined") this.total = Number(data.total);
          } else if (Array.isArray(res?.list)) {
            this.list = res.list;
            if (typeof res.total !== "undefined") this.total = Number(res.total);
          } else {
            this.list = [];
          }
          if (!this.total) this.total = Number(this.sendData?.cnt || 0);
        })
        .catch(() => {
          this.list = [];
        })
        .finally(() => {
          this.loading = false;
           // 表格垂直滚动条置顶
        this.$nextTick(() => {
   
             // ✅ 表格滚动条置顶
            const tableBody = this.$refs.tableScroll?.bodyWrapper;
            if (tableBody) {
            tableBody.scrollTop = 0;
            }
            // 时间轴横向滚动条回到最左边
            if (this.$refs.timelineScroll) {
            this.$refs.timelineScroll.scrollTop = 0;
            }
        });
        });
    },
  },
};
</script>

<style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.mb12 {
  margin-bottom: 12px;
}
.contentBoxYY {
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 4px;
}
.pagination-box {
    text-align: center;
  margin-top: 12px;
  text-align: right;
  background: #fff;
  padding: 8px 0;
  position: sticky;
  bottom: 0;
}

/* 时间轴部分 */
.timeline-container {
  margin-top: 15px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  overflow-x: auto;
  white-space: nowrap;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
  height: 60vh;
}
.timeline-scroll {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 8px;
  min-width: max-content;
}
.timeline-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.timeline-item:hover {
  transform: scale(1.05);
}
.timeline-item.active .dot {
  background-color: #67c23a;
}
.timeline-item .dot {
  width: 12px;
  height: 12px;
  background-color: #409eff;
  border-radius: 50%;
  margin-bottom: 6px;
}
.timeline-content {
  font-size: 12px;
  color: #555;
}
.timeline-content .time {
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}
.timeline-content .info {
  font-size: 12px;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}


.timeline-wrapper {
  position: relative;
  padding: 40px 60px;
  border-radius: 16px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
  overflow-y: auto;
  height: 60vh;
  margin-bottom: 20px;
  background: #f0f0f0;
}

/* 每个节点整体 */
.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
}

/* 时间线圆点 */
.timeline-dot {
  position: absolute;
  left: 0px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(64,158,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  z-index: 2;
  transition: transform 0.3s, box-shadow 0.3s;
}
.timeline-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(64,158,255,0.8);
}

/* 时间线竖线 */
.timeline-line {
  position: absolute;
  left: 10px;
  top: 22px;
  width: 2px;
  height: calc(100% - 22px);
  opacity: 0.8;
}

/* 内容外框 */
.timeline-content-box {
  background: transparent;
  position: relative;
}

/* 标题栏 */
.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.timeline-step {
  color: #409EFF;
  font-weight: bold;
}
.timeline-date {
  font-style: italic;
}

/* 卡片内容 */
.timeline-card {
  background: #fff;
  border-radius: 12px;
  padding: 5px 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.3s;
  border-left: 4px solid #409EFF;
  width: 249px;
}
.timeline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* 卡片内文字结构 */
.timeline-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
  color: #303133;
}
.timeline-icon {
  color: #409EFF;
  margin-right: 6px;
}
.timeline-body {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 10px;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.timeline-footer {
  text-align: right;
}
</style>
